<script setup lang="ts">
import list from '@/views/update_form_data/list/index.vue'
import { ref } from 'vue'
import type { formData } from '@/types/update_form_data'
import { message } from 'ant-design-vue'

const formData = ref<formData>({
  id: 1,
  name: '李四',
  age: 23,
  jobs: []
})

// 父子组件同步更新
// const onOk = () => {
//   message.success('子组件提交表单了,父组件数据为' + JSON.stringify(formData.value))
// }
//父子组件同步更新

//父子组件单独更新
const updatedValue = ref<formData>()
const onOk = (value: any) => {
  console.log('value', value)
  updatedValue.value = value
  message.success('子组件提交表单了')
}
//父子组件单独更新
</script>

<template>
  <div>
    <h2>父组件 {{ formData }}</h2>
    <h3>子组件提交内容：{{ updatedValue }}</h3>

    <!-- 父子组件同步更新 -->
    <!-- <list v-model:data="formData" @submit="onOk"></list> -->
    <!-- 父子组件单独更新 -->
    <list :data="formData" @submit="onOk"></list>
  </div>
</template>
<style lang="css" scoped></style>
